<template>
  <Cascader v-bind="attrs" :value="state" :options="getOptions" @change="handleChange" />
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted } from 'vue'
  import { Cascader } from 'ant-design-vue'
  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus } from '../../utils/areaDataUtil'
  import { useRuleFormItem } from '/@/hooks/component/useFormItem'
  import { propTypes } from '/@/utils/propTypes'
  import { useAttrs } from '/@/hooks/core/useAttrs'
  export default defineComponent({
    name: 'JAreaLinkage',
    components: {
      Cascader,
    },
    inheritAttrs: false,
    props: {
      value: propTypes.oneOfType([propTypes.object, propTypes.array, propTypes.string]),
      //是否显示区县
      showArea: propTypes.bool.def(true),
      //是否是全部
      showAll: propTypes.bool.def(false),
    },
    emits: ['options-change', 'change'],
    setup(props, { emit, refs }) {
      const emitData = ref<any[]>([])
      const attrs = useAttrs()
      const [state] = useRuleFormItem(props, 'value', 'change', emitData)
      const getOptions = computed(() => {
        if (props.showArea && props.showAll) {
          return regionDataPlus
        }
        if (props.showArea && !props.showAll) {
          return regionData
        }
        if (!props.showArea && !props.showAll) {
          return provinceAndCityData
        }
        if (!props.showArea && props.showAll) {
          return provinceAndCityDataPlus
        }
      })
      /**
       * 监听value变化
       */
      watchEffect(() => {
        props.value && initValue()
      })

      /**
       * 将字符串值转化为数组
       */
      function initValue() {
        let value = props.value ? props.value : []
        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
          state.value = value.split(',')
        }
      }

      function handleChange(array, ...args) {
        // emitData.value = args;
        //update-begin-author:taoyan date:2022-6-27 for: VUEN-1424【vue3】树表、单表、jvxe、erp 、内嵌子表省市县 选择不上
        // 上面改的v-model:value导致选中数据没有显示
        state.value = array
        //update-end-author:taoyan date:2022-6-27 for: VUEN-1424【vue3】树表、单表、jvxe、erp 、内嵌子表省市县 选择不上
      }
      return {
        state,
        attrs,
        regionData,
        getOptions,
        handleChange,
      }
    },
  })
</script>
